<template>
	<om-page :title="pageTitle">
		<view class="desc-chart">
			<uni-search-bar
			bgColorCls="bg-steelblue" 
			cancelColor="text-white"
			 :focus="true" 
			 placeholder="请输入关键字" 
			 @confirm="confirm"></uni-search-bar>
		</view>
		<view class="nodata" v-show="dataList.length == 0 && dataStatus">{{ '暂无数据！' }}</view>
		<view class="page__bd" style="margin-top: 51px;">
			<uni-list>
				<view v-for="(item, index) in dataList" :key="index">
					<uni-list-item
						:title="'商机代码：'+item.biddingCode"
						:avatar="index + 1"
						:avatarBgColor="calcBgColor(item)"
						@click="getoLink(item)"
					>
					 <view slot="note">
						<view>项目名称：<text class="">{{item.biddingProjectName}}</text></view>
						<view style="height: 32px; line-height: 32px;">
							<view class="desw">项目阶段：{{ item.projectPhase}}</view>
							<view class='radius light bg-blue zbbtn' @click.stop="openPopup(item,0)" style="text-align: center;">项目阶段</view>
						</view>
						<view>商机所有人：<text class="">{{item.salesClerkName}}</text></view>
						<view style="height: 32px; line-height: 32px;">
							<view class="desw">支持伙伴：</view>
							<view class='radius light bg-blue zbbtn' @click.stop="openPopup(item,1)" style="text-align: center;">查看</view>
						</view>
						<view style="height: 32px; line-height: 32px;">
							<view class="desw">甲方关键人信息：</view>
							<view class='radius light bg-blue zbbtn' @click.stop="openPopup(item,2)" style="text-align: center;">查看</view>
						</view>
						<view style="height: 32px; line-height: 32px;">
							<view class="desw">竞争者优劣势分析：</view>
							<view class='radius light bg-blue zbbtn' @click.stop="openPopup(item,3)" style="text-align: center;">查看</view>
						</view>
					 </view>
					</uni-list-item>
				</view>
			</uni-list>
		</view>
		<tui-scroll-top :scrollTop="scrollTop" style="background: rgba(124, 174, 255, 0.5)"></tui-scroll-top>
		<view class="mask" v-show="maskShow">
			<view class="bg"></view>
			<view class="container">
				<view class="cont">
					<view class="tit">{{ table.tableTit }}</view>
					<view class="show">
						<ot-table
							textAlign="left" 
							titleTextAlign="center" 
							:tableData="table.tableData" 
							:columns="table.tableColumns"
						>
						</ot-table>
					</view>
					<view class="margin flex justify-end" @click="cancel">
						<a class="cancel-btn">关闭</a>
					</view>
				</view>
			</view>
		</view>
	</om-page>
</template>

<script>
	import { ignoreHtml } from '@/static/js/common.js';
	export default {
		data() {
			return {
				dataStatus: false,
				pageTotal: 1,
				pageNum: 1,
				pageSize: 20,
				scrollTop: 0,
				pageTitle:"商机查询",
				dataList: [],
				keyword: '',
				columnList: [],
				tableTit:['项目阶段','支持伙伴','甲方关键人信息','竞争者优劣势分析'],
				tableColumns: [[
					{
						title: '日期',
						key: 'stageDate',
						width: 150,
						children: [
							{ "title": "销售", "dataIndex": "广州二区销售" },
							{ "title": "计划销售", "dataIndex": "广州二区计划销售" },
							{ "title": "达成", "dataIndex": "广州二区达成" }
						]
					},
					{
						title: '项目阶段',
						key: 'projectPhaseName',
						width: 150,
					},
					{
						title: '阶段起始日期',
						key: 'stageStartDate',
						width: 150,
					},
					{
						title: '预计采购金额',
						key: 'purchaseAmount',
						width: 150,
					},
					{
						title: '赢率(%)',
						key: 'winRateNum',
						width: 150,
					},
					{
						title: '预计赢单金额',
						key: 'expectedWinningAmount',
						width: 150,
					},
					{
						title: '阶段说明',
						key: 'lineRemark',
						width: 150,
					}
				],[
					{
						title: '角色',
						key: 'roleName',
						width: 150,
					},
					{
						title: '姓名',
						key: 'userName',
						width: 150,
					},
					{
						title: '岗位',
						key: 'posName',
						width: 150,
					},
					{
						title: '机构',
						key: 'partnerInstName',
						width: 150,
					},
					{
						title: '手机号',
						key: 'phone',
						width: 150,
					},
					{
						title: '角色职责',
						key: 'lineRemark',
						width: 150,
					}
				],[
					{
						title: '姓名',
						key: 'userName',
						width: 150,
					},
					{
						title: '性别',
						key: 'sex',
						width: 150,
					},
					{
						title: '岗位名称',
						key: 'postName',
						width: 150,
					},
					{
						title: '机构名称',
						key: 'instName',
						width: 150,
					},
					{
						title: '角色',
						key: 'role',
						width: 150,
					},
					{
						title: '当前态度',
						key: 'nowAttitude',
						width: 150,
					},
					{
						title: '手机号码',
						key: 'phone',
						width: 150,
					},
					{
						title: '关注焦点',
						key: 'focus',
						width: 150,
					},
					{
						title: '关键人描述',
						key: 'keyPersonDescription',
						width: 150,
					}
				],[
					{
						title: '竞争者',
						key: 'competitior',
						width: 150,
					},
					{
						title: '优势分析',
						key: 'advantageAnalyse',
						width: 250,
					},
					{
						title: '劣势分析',
						key: 'disadvantageAnalyse',
						width: 250,
					}
				]],
				table: {
					tableTit: [],
					tableData: [],
					tableColumns: []
				},
				maskShow: false,
			};
		},
		provide() {
			return {
				searchKey: this
			}
		},
		methods: {
			confirm(e){
				let _that = this
				if (e.value) {
				  if (!_that.keyword || (_that.keyword && _that.keyword != e.value.trim())) {
					_that.keyword = e.value.trim()
					_that.searchList()
				  }
				} else {
				  _that.keyword = ''
				  _that.searchList()
				}
			},
			calcBgColor(item) {
				return this.ColorList[3].name
			},
			getoLink(item){
				let _that = this;
				let title = item.biddingProjectName

				let arr = [];
				for(let i=0; i<_that.columnList.length; i++){
					let obj = {};
					obj.name = _that.columnList[i].title
					if(typeof(item[_that.columnList[i].field]) == "string"){
						obj.value = ignoreHtml(item[_that.columnList[i].field])
					}else{
						obj.value = item[_that.columnList[i].field]
					}
					
					arr.push(obj)
				}
				_that.om.getPageInfo(arr, title, {});
			},
			searchList(){
				let _that = this;				
				_that.pageNum = 1
				_that.dataList = []
				_that.dataStatus = false
				_that.getDataList()
			},
			getDataList(){
				let _that = this;
				if(_that.keyword){
					_that.om.request("commonRegister/getDataGrid",{
						page: _that.pageNum,
						rows: _that.pageSize,
						tableMark: 'KEY_376',
						// formCode: 'MAR0608',
						searchValue: _that.keyword
					}).then(res=>{
						_that.dataList = _that.dataList.concat(res.rows)
						_that.dataStatus = true
						_that.pageTotal = res.totalPage
					})
				}else{
					_that.om.request("commonRegister/getDataGrid",{
						page: _that.pageNum,
						rows: _that.pageSize,
						tableMark: 'KEY_376',
						// formCode: 'MAR0608',
						searchValue: ''
					}).then(res=>{
						_that.dataList = _that.dataList.concat(res.rows)
						_that.dataStatus = true
						_that.pageTotal = res.totalPage
					})
				}
			},
			getColumnList(){
				let _that = this;
				_that.om.request("ttableColumn/getGridModel",{
					tableMark: 'KEY_376'
				}).then(res=>{
					if(res.succeed){
						_that.columnList = res.value.frozenColumns[0] ? res.value.frozenColumns[0].concat(res.value.columns[0]) : res.value.columns[0];
					}else{
						_that.om.toast(res.msg)
					}
				})
			},
			openPopup(item,index){
				let _that = this;
				_that.table.tableTit = _that.tableTit[index]
				_that.table.tableColumns = _that.tableColumns[index]
				if(index==0){
					_that.om.request("biddingShow/getStageByBiddingId",{
						biddingId: item.id
					}).then(res=>{
						_that.table.tableData = res
						_that.maskShow = true
					})
				}else if(index==1){
					_that.om.request("biddingShow/getBiddingProjectPartnerList",{
						biddingShowId: item.id
					}).then(res=>{
						_that.table.tableData = res
						_that.maskShow = true
					})
				}else if(index==2){
					_that.om.request("biddingShow/getRelationshipList",{
						biddingId: item.id
					}).then(res=>{
						_that.table.tableData = res
						_that.maskShow = true
					})
				}else{
					_that.om.request("biddingShow/getBiddingProjectCompetitorList",{
						biddingShowId: item.id
					}).then(res=>{
						_that.table.tableData = res
						_that.maskShow = true
					})
				}
			},
			cancel(){
				this.table.tableTit = []
				this.table.tableColumns = []
				this.table.tableData = []
				this.maskShow = false
			},
		},
		onLoad(data) {
			let _that = this;
			
			uni.setNavigationBarTitle({
				title: '商机查询'
			});
			
			_that.getColumnList()
			_that.getDataList()
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop
		},
		// 页面上拉触底事件的处理函数
		onReachBottom: function() {
			let _that = this;
			if(_that.pageTotal>_that.pageNum){
				_that.pageNum++
				_that.getDataList()
			}
		}
	};
</script>

<style>
	.zbbtn{
		float: right;
		width: 64px; 
		height: 28px;
		line-height: 28px;
		font-size: 12px;
		display: inline-block;
		margin: 0 5px;
	}
	.popup-item{
		height:50px;
		background-color: #FFFF;
		font-size: 16px;
		text-align: center;
		border-bottom: 1px solid #EEEEEE;
		display: flex;
		justify-content: space-between;
	}
	.popup-cotent{
		width: 300px;
		background-color: white;
		border-radius: 10px;
	}
	.popup-tip{
		font-size: 16px;
		color:#b0b0b0 ;
	}
	.table-data{
		/* overflow: hidden; */
		/* width: 270px; */
		/* position: relative; */
		/* display: block; */
		width: 270px;
		max-height: 160px;
		overflow: auto;
	}
	.cancel-btn{
		text-align: center;
		display: block;
		color: #0081ff;
		background-color: #cce6ff;
		height: 36px;
		line-height: 36px;
		width: 72px;
		margin: 15px auto 0;
	}
	.desc-chart{
		position: fixed;
		top: 0;
		/* line-height: 50px;
		padding: 0 15px; */
		font-size: 14px;
		border-bottom: #EEEEEE 1px solid;
		/* display: flex; */
		z-index: 99;
		width: 100%;
		background: #FFF;
	}
	.nodata{
		width: calc(100% - 30px);
		margin: 72px 15px 0;
		height: 26px;
		line-height: 26px;
		background: none;
		text-align: center;
	}
	.mask{
		position: fixed;
		z-index: 99;
	}
	.mask .bg{
		opacity: 1;
	    position: fixed;
	    bottom: 0px;
	    top: 0px;
	    left: 0px;
	    right: 0px;
	    background-color: rgba(0, 0, 0, 0.4);
	    transition: opacity 300ms ease 0ms, -webkit-transform 300ms ease 0ms, transform 300ms ease 0ms;
	    transform-origin: 50% 50% 0px;
	}
	.mask .container{
		transform: scale(1);
		opacity: 1;
		position: fixed;
		display: flex;
		flex-direction: column;
		bottom: 0px;
		left: 0px;
		right: 0px;
		top: 0px;
		justify-content: center;
		align-items: center;
		transition: opacity 300ms ease 0ms, -webkit-transform 300ms ease 0ms, transform 300ms ease 0ms;
		transform-origin: 50% 50% 0px;
	}
	.mask .container .cont{
		width: 300px;
		background-color: white;
		border-radius: 10px;
		padding: 15px;
		box-sizing: border-box;
	}
	.mask .container .cont .tit{
		font-size: 16px;
		color: #b0b0b0;
		margin: 15px;
	}
	.mask .container .cont .show{
		
	}
	.desw{
		float: left;
	}
</style>                                                  
                                       